<template>
  <div class="dingdan">
    <div class="top">
      <span v-for='(item,index) in dingdanArr' :key="index" @click='qiehuan(index)' :class="{active:current == index}">
        {{item}}
      </span>
    </div>

    <main>

      <div class="dingdan2" v-for='(item,index) in shoppingArr' :key="index">

        <div class="imgs">

          <div class="imgsss">
            <img :src="item.pic" alt="">
          </div>
          <div class="imgsss">
            <img :src="item.pic" alt="">
          </div>

        </div>
        <div class="jine" style="font-size:25px;">￥ {{item.jine}}</div>
        <div class="zailaiyidan" @click='qufan(item)'>
          {{item.laiyidan?'再来一单':'已送达'}}
        </div>
      </div>

    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      dingdanArr: ['全部', '待消费', '待评价', '退款'],
      shoppingArr: [
        { laiyidan: true, pic: 'https://img.zcool.cn/community/016e7e592e79d9b5b3086ed42de3dc.png@1280w_1l_2o_100sh.png', name: '纯手工饺子(风城九路店)', jine: 17.8 },
        { laiyidan: true, pic: 'https://img.zcool.cn/community/016e7e592e79d9b5b3086ed42de3dc.png@1280w_1l_2o_100sh.png', name: '纯手工饺子(风城九路店)', jine: 17.8 },
        { laiyidan: true, pic: 'https://img.zcool.cn/community/016e7e592e79d9b5b3086ed42de3dc.png@1280w_1l_2o_100sh.png', name: '纯手工饺子(风城九路店)', jine: 17.8 },
        { laiyidan: true, pic: 'https://img.zcool.cn/community/016e7e592e79d9b5b3086ed42de3dc.png@1280w_1l_2o_100sh.png', name: '纯手工饺子(风城九路店)', jine: 17.8 },
      ]
    }
  },
  methods: {
    qiehuan(index) {
      this.current = index
    },
    qufan(item) {
      item.laiyidan = !item.laiyidan
    }
  },
}
</script>

<style lang='scss' scoped>
.jine {
  margin-top: 50px;
  position: absolute;
  bottom: 100px;
  right: 0;
}
.zailaiyidan {
  width: 100px;
  height: 40px;
  // background-color: aqua;
  border: 2px solid aqua;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  color: aqua;
  margin-top: 130px;
  margin-left: 50px;
}
main {
  width: 100%;
  height: 100%;
  // background-color: aqua;

  .dingdan2 {
    width: 100%;
    height: 200px;
    // background-color: bisque;
    margin-top: 10px;
    position: relative;
    display: flex;

    .dingdan-top {
      width: 100%;
      height: 10%;
      // background-color: pink;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .imgs {
      width: 60%;
      height: 90%;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-color: orange;

      .imgsss {
        width: 40%;
        height: 40%;
        border: 1px solid red;
        margin-left: 10px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.active {
  color: orange;
  font-weight: 800;
}
.dingdan {
  width: 100%;
  height: 100%;

  .top {
    width: 100%;
    height: 40px;
    background-color: aqua;
    display: flex;
    align-items: center;

    span {
      margin-right: 15px;
      font-size: 20px;
    }
  }
}
</style>